<!-- 头部 -->
{include file="public/top" /}
<!-- /头部 -->
<div class="main-container" id="main-container">
    <!-- left -->
    {include file="public/left" /}
    <!-- /left -->
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <!-- #section:basics/content.breadcrumbs -->
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i> <a href="#">首页</a>
                    </li>
                    <li><a href="#">用户管理</a></li>
                    <li class="active">添加用户组</li>
                </ul>
                <!-- /.nav-search -->
            </div>
            <div class="page-content">
                <div class="page-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h1>
                                添加用户组
                                <small>
                                    <i class="ace-icon fa fa-angle-double-right"></i>
                                    添加用户组
                                </small>
                            </h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="widget-box">
                            <div class="widget-body">
                                <div class="widget-main padding-16">
                                    <div class="row">
                                        <form action="" method="POST" id="addForm" >
                                            <div class="form-group clearfix">
                                                <label class="col-sm-1 label_control no-padding-right" > 用户组名称 </label>
                                                <div class="col-sm-10">
                                                    <input type="text"  name="title"  class="col-xs-10 col-sm-3"  >
                                                    <span class="help-inline col-xs-12 col-sm-7 pt"></span>
                                                </div>
                                            </div>
                                            <div class="form-group clearfix">
                                                <label class="col-sm-1 label_control no-padding-right" > 用户组描述 </label>
                                                <div class="col-sm-10">
                                                    <input type="text"  name="remark"  class="col-xs-10 col-sm-3" >
                                                    <span class="help-inline col-xs-12 col-sm-7 pt"></span>

                                                </div>
                                            </div>
                                            <div class="form-group clearfix">
                                                <label class="col-sm-1 label_control no-padding-right" > 分配权限 </label>
                                                <div class="col-sm-3">
                                                    <div id="treeview" class="tree"></div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="id" value="{$group_data['id']}">
                                            <input type="hidden" id="rule_ids" name="rule_ids" >
                                            <div class="col-xs-6 align-center">
                                                <input type="submit"  id="addsubmit" value="提交保存" class="btn btn-info input-small btn-round">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
</div><!-- /.main-container -->

<script type="text/javascript">
    jQuery(function ($) {
        var sampleData = initiateDemoData();


        $('#treeview').ace_tree({
            dataSource: sampleData['dataSource1'],
            multiSelect: true,
            cacheItems: true,
            'open-icon': 'ace-icon tree-minus',
            'close-icon': 'ace-icon tree-plus',
            'selectable': true,
            'selected-icon': 'ace-icon fa fa-check',
            'unselected-icon': 'ace-icon fa fa-times',
            loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
        });

        function initiateDemoData() {
            var tree_data = <?php echo $treeData ;?>;

            var dataSource1 = function (options, callback) {


                var $data = null
                if (!("text" in options) && !("type" in options)) {
                    $data = tree_data;//the root tree
                    callback({ data: $data });
                    return;
                }
                else if ("type" in options && options.type == "folder") {
                    if ("additionalParameters" in options && "children" in options.additionalParameters)
                        $data = options.additionalParameters.children || {};
                    else $data = {}//no data
                }

                if ($data != null)//this setTimeout is only for mimicking some random delay
                    setTimeout(function () { callback({ data: $data }); }, parseInt(Math.random() * 100) + 100);
            }
            return { 'dataSource1': dataSource1 }
        }

        $('#addsubmit').on('click', function() {
            var output = '';

            var items = $('#treeview').tree('selectedItems');

            for(var i in items) if (items.hasOwnProperty(i)) {
                var item = items[i];

                output += item.additionalParameters['id']+",";
            }


            $('#rule_ids').val(output);


        });

    });


</script>